<template>
	<view class="pt-20 pb-20 pl-30 pr-30 y-flex y-row y-align-center" :style="{'background-color': bgColor || skinColor.color_gap_1}">
		<text class="fs-28 y-flex-1" :style="{color: skinColor.color_1}">{{text}}</text>
		<slot name="right"></slot>
	</view>
</template>

<script>
	import SkinColor from '@/assets/skin/index.js'
	export default {
		props: {
			text: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: ''
			}
		},
		computed: {
			skinMode () {
				return this.$store.getters['setting/GET_SKIN_MODE']
			},
			skinColor () {
				return SkinColor[this.skinMode]
			}
		}
	}
</script>

<style>
</style>